import React, {Component} from 'react'
import {View, Text, ScrollView, StyleSheet, Image, Dimensions,TouchableOpacity} from 'react-native'
import LoadingCommon from '../common/loading_common'
import Icon from 'react-native-vector-icons/Ionicons'
import styles from '../../config/styles'
var {height, width} = Dimensions.get('window')
import ScrollableTabView from 'react-native-scrollable-tab-view'
import { VictoryBar, VictoryChart, VictoryAxis, VictoryVoronoiContainer } from 'victory-native';
import NavigatorService from '../../config/navigate_service'
import LinearGradient from 'react-native-linear-gradient';
import {getPhonogramStudents} from '../../config/api'
import getUserHeaderImg from '../../helpers/infomation'





class SymbolDetail extends Component {
    static navigationOptions = ({ navigation }) => {
        let options = {
            title: '单元音E:',
            headerRight: <View />
        }
        return options
    }

    constructor (props) {
        super(props)
        this.state = {
            classId: props.navigation.state.params.id,
            phonogram_code:props.navigation.state.params.phonogram_code,
            loading: false,
            students:[]
        }
    }

    componentDidMount () {
        this.getData();
    }

    getData = () => {
        getPhonogramStudents(this.state.classId,this.state.phonogram_code).then((data)=>{
            console.log(data);
            if(data.code == 0){
                this.setState({
                    students:data.data
                })
            }
        })

    }

    render () {
        const student_errors = this.state.students;
        let sum_errors = 0;
        student_errors.forEach((student_errors,index)=>{

            sum_errors += student_errors.error_count
        })



        if (this.state.loading) {
            return <LoadingCommon />
        } else {
            return (
                <ScrollView>

                    <View style={[styles.main_body]}>


                        <View style={[styles.sum_err_times]}><Text>总错误次数<Text style={{color:'#ff600a'}}>{sum_errors}</Text>次</Text></View>
                        <View style={[styles.err_times_list]}>



                            {
                                student_errors.map((student,index)=>{
                                    return <View style={[styles.err_times_item]} key={index}>
                                        <View ><Image source={getUserHeaderImg(student.student)} style={{height: 60, width: 60,borderRadius: 30}}></Image></View>
                                        <View style={{paddingLeft:15,flex:1,justifyContent: 'center'}}><Text style={{fontSize:16}}>{student.student.name}</Text></View>
                                        <View style={{justifyContent: 'center'}}><Text><Text style={{color:'#ff600a',fontSize:16}}>{student.error_count} </Text>次</Text></View>
                                    </View>
                                })
                            }
                        </View>
                    </View>

                </ScrollView>
            )
        }

    }
}

export default SymbolDetail